<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <title>用户管理</title>
  {% include 'rbac/common/main-header.html' %}
  <style>
    /* 外层容器 */
    .container {
      display: flex;
      justify-content: space-between; /* 让盒子1和盒子2首尾居中分布 */
      align-items: center;
    }

    /* 盒子1 */
    .box1 {
      display: flex;
      flex-direction: column;
      justify-content: space-between; /* 让盒子3和盒子4竖直方向首尾分布 */
    }

    /* 盒子3 */
    .box3 {
      display: flex;
      justify-content: space-between; /* 让小盒子们水平等距分布 */
    }

    /* 盒子4 */
    .box4 {
      display: flex;
      justify-content: space-between; /* 让小盒子们水平等距分布 */
    }
  </style>
</head>
<body class="pear-container">
<!-- 筛选查询 -->
<div class="layui-card">
  <div style="padding: 15px 60px 0 15px;">
    <form class="layui-form" action="">
      <div class="container">
        <div class="box1">
          <div class="box3">
            <div class="small-box">
              <div class="layui-form-item">
                <label class="layui-form-label">昵称</label>
                <div class="layui-input-inline layui-input-wrap">
                  <input type="text" name="nickname" autocomplete="off" lay-affix="clear" class="layui-input">
                </div>
              </div>
            </div>
            <div class="small-box">
              <div class="layui-form-item">
                <label class="layui-form-label">职位</label>
                <div class="layui-input-inline layui-input-wrap">
                  <input type="text" name="postion" autocomplete="off" lay-affix="clear" class="layui-input">
                </div>
              </div>
            </div>
            <div class="small-box">
              <div class="layui-form-item">
                <label class="layui-form-label">性别</label>
                <div class="layui-inline">
                  <select name="gender">
                    <option value="">请选择</option>
                    <option value="1">男</option>
                    <option value="2">女</option>
                    <option value="3">未知</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
          <div class="box4">
            <div class="small-box">
              <div class="layui-form-item">
                <div class="layui-inline">
                  <label class="layui-form-label">时间范围</label>
                  <div class="layui-inline" id="ID-laydate-range">
                    <div class="layui-input-inline">
                      <input type="text" autocomplete="off" id="ID-laydate-start-date" class="layui-input" placeholder="开始日期">
                    </div>
                    <div class="layui-form-mid">-</div>
                    <div class="layui-input-inline">
                      <input type="text" autocomplete="off" id="ID-laydate-end-date" class="layui-input" placeholder="结束日期">
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="small-box">
              <div class="layui-form-item">
                <label class="layui-form-label">是否启用</label>
                <div class="layui-inline">
                  <select name="is_enabled">
                    <option value="">请选择</option>
                    <option value="1">启用</option>
                    <option value="0">禁用</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="box2">
          <div class="layui-form-item">
            <div class="layui-input-block">
              <button
                type="submit"
                class="layui-btn"
                lay-submit
                lay-filter="user-get-form-btn"
              >
                开始查询
              </button>
              <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>
<!-- 左边是部门列表树,右边是用户列表 -->
<div class="layui-row layui-col-space15">
  <div class="layui-col-md2">
    <div class="layui-card"> <!-- width:300px 通过设置它,调整白板的宽度,以适应白板的内容-->
      <div class="layui-card-body">
        <div id="user-department-tree"></div>
      </div>
    </div>
  </div>
  <div class="layui-col-md10">
    <div class="layui-card">
      <div class="layui-card-body">
        <table
          class="layui-hide"
          id="user-table"
          lay-filter="user-table"
        ></table>
      </div>
    </div>
  </div>
</div>
</body>
<script type="text/html" id="user-toolbar">
  <div class="layui-btn-container">
    <button type="button" class="layui-btn layui-btn-sm" lay-event="user-add">
      新增用户
    </button>
  </div>
</script>
<script type="text/html" id="user-tool">
  <div class="layui-btn-container">
    <button
      type="button"
      class="layui-btn layui-btn-xs layui-bg-blue"
      lay-event="user-edit"
    >
      <i class="layui-icon layui-icon-edit"></i>编辑
    </button>
    <button
      type="button"
      class="layui-btn layui-btn-xs"
      lay-event="user-role"
    >
      <i class="layui-icon layui-icon-diamond"></i>授角
    </button>
    <button
      type="button"
      class="layui-btn layui-btn-xs layui-bg-orange"
      lay-event="user-reset-pwd"
    >
      <i class="layui-icon layui-icon-release"></i>重置密码
    </button>
    <button
      type="button"
      class="layui-btn layui-btn-xs layui-bg-red"
      lay-event="user-remove"
    >
      <i class="layui-icon layui-icon-delete"></i>删除
    </button>
  </div>
</script>
{% include 'rbac/common/main-footer.html' %}
<script>
  let token = "{{ csrf_token }}";
  solve_csrf(token)

  layui.use(["table", "popup", "form", "tree", "laydate", 'util'], function () {
    let table = layui.table;
    let popup = layui.popup;
    let $ = layui.$;
    let form = layui.form;
    let tree = layui.tree;
    let laydate = layui.laydate;
    let util = layui.util;

    // 获取部门树（全部数据）
    $.ajax({
      url: `/api/v1/user/department_get/`,
      type: "get",
      success: function (ret) {
        tree.render({
          elem: '#user-department-tree',
          id: 'user-department-tree',
          data: ret.data,  // 展示有哪些权限
          showCheckbox: true,  // 显示复选框
        });
        tree.setChecked("user-department-tree", ret.select);  // 选中权限
      },
    });

    // 日期范围 - 左右面板独立选择模式
    let startTime;
    let endTime;
    laydate.render({
      elem: '#ID-laydate-range',
      range: ['#ID-laydate-start-date', '#ID-laydate-end-date'],
      done: function (value, date, endDate) {
        startTime = date.year + "-" + date.month + "-" + date.date; //开始时间
        endTime = endDate.year + "-" + endDate.month + "-" + endDate.date; //结束时间
      }
    });

    // 构建查询条件参数,作为用户表格数据api的?params参数
    let searchParams;
    form.on("submit(user-get-form-btn)", function (data) {
      let checkDepartmentData = tree.getChecked("user-department-tree"); // 获取选中节点的数据
      let department_ids = get_layui_tree_id(checkDepartmentData).join();
      searchParams = {...data.field, start_time: startTime, end_time: endTime, department_ids: department_ids}
      init_user_table();
      return false;
    });

    // 用于在用户列表里点击用户头像,进行预览 (util组件传递不了参数,曲线救国 通过属性来实现的!!
    util.on('lay-on', {
      'user-tips-photos-one': function (othis) {
        let src = othis.context.attributes.imgurl.nodeValue
        layer.photos({
          photos: {
            "title": "用户头像预览",
            "data": [
              {
                "alt": "用户头像",
                "src": src,
              }
            ]
          },
          footer: false // 是否显示底部栏 --- 2.8.16+
        });
      },
    })

    function init_user_table() {
      // 用户列表
      table.render({
        elem: "#user-table",
        url: "/api/v1/user/table/",
        where: searchParams,
        height: "full-35",
        toolbar: "#user-toolbar",
        page: true,
        cols: [
          [
            {field: "id", title: "ID", sort: true, width: 80, fixed: "left",},
            {field: "nickname", title: "昵称", width: 120},
            {field: "username", title: "用户名", width: 120},
            {
              field: "avatar",
              title: "头像",
              width: 60,
              align: "center",
              templet: (d) => {
                const imageUrl = `${window.location.origin}` + `${d.avatar}`;
                return `<a imgurl="${imageUrl}" lay-on="user-tips-photos-one">
                        <img src="${imageUrl}" alt="头像" style="width: 30px; height: auto;" /></a>`;
              }
            },
            {field: "mobile", title: "手机号", width: 120},
            {field: "email", title: "邮箱", width: 150},
            {
              field: "gender",
              title: "性别",
              width: 50,
              align: "center",
              templet: (d) => {
                if (d.gender === "男") {
                  return `<span class="layui-badge layui-bg-green">男</span>`;
                } else if (d.gender === "女") {
                  return `<span class="layui-badge layui-bg-blue">女</span>`;
                } else if (d.gender === "未知") {
                  return `<span class="layui-badge-rim">未知</span>`;
                }
              },
            },
            {field: "department", title: "所属部门", width: 120},
            {field: "postion", title: "职位", width: 120},
            {field: "create_datetime", title: "创建时间", width: 180},
            {field: "update_datetime", title: "更新时间", width: 180},
            {
              field: "is_enabled",
              title: "是否启用",
              width: 100,
              align: "center",
              templet: (d) => {
                return `<input type="checkbox"
                             name="is_enabled"
                             value="${d.id}"
                             title="启用|禁用"
                             lay-skin="switch" ${d.is_enabled ? "checked" : ""}
                             lay-filter="user-table-switch-status"/>`;
              },
            },
            {
              fixed: "right",
              title: "操作",
              align: "center",
              width: 290,
              toolbar: "#user-tool",
            },
          ],
        ],
      });
    }

    init_user_table();

    // 头部工具栏事件 - 新增用户、..
    table.on("toolbar(user-table)", function (obj) {
      if (obj.event === "user-add") {
        window.user_add();
      }
    });

    // 行工具栏事件 - 编辑、删除、授权、重置密码
    table.on("tool(user-table)", function (obj) {
      if (obj.event === "user-edit") {
        window.user_edit(obj);
      } else if (obj.event === "user-remove") {
        window.user_remove(obj);
      } else if (obj.event === "user-role") {
        window.user_role(obj);
      } else if (obj.event === "user-reset-pwd") {
        window.user_reset_pwd(obj);
      }
    });

    window.user_add = function () {
      let url = "/rbac/user/add.html/";
      let user_add_index = layer_open("新增用户", url, '650px', '450px');
      layer.full(user_add_index);
    };

    window.user_edit = function (obj) {
      let url = "/rbac/user/edit.html/?id=" + obj.data.id;
      let user_edit_index = layer_open("编辑用户", url, '650px', '450px');
      layer.full(user_edit_index);

    };

    window.user_remove = function (obj) {
      layer.confirm('确定要删除 [' + obj.data.nickname + '] 这个用户?', {icon: 3, title: '提示'}, function (index) {
        layer.close(index)
        let url = "/api/v1/user/del/"
        let data = {id: obj.data.id}
        deleteAjaxRequest(popup, obj, url, data)
      })
    }

    window.user_role = function (obj) {
      layer.confirm('确定给 [' + obj.data.nickname + '] 授角?', {icon: 3, title: '提示'}, function (index) {
        layer.close(index)
        let url = "/rbac/user/give_role.html/?id=" + obj.data.id;
        layer_open("用户授角", url, '440px', '290px');
      })
    }

    window.user_reset_pwd = function (obj) {
      layer.confirm('确定要给 [' + obj.data.nickname + '] 重置密码?', {icon: 3, title: '提示'}, function (index) {
        layer.close(index)
        let url = "/rbac/user/reset_pwd.html/?id=" + obj.data.id;
        layer_open("重置密码", url, '500px', '300px');
      })
    }

    // 复选框事件处理 >> 用户的 启用/禁用
    form.on("switch(user-table-switch-status)", function (obj) {
      let operate = obj.elem.checked ? 1 : 0;
      let url = "/api/v1/user/is_enabled/"
      let data = {id: obj.value, is_enabled: operate}
      let reload_table = "user-table"
      switchAjaxRequest(popup, url, data, reload_table)
      return false;
    })
  })
</script>
</html>


